<style lang="less">

</style>
<template>
    <div>
        <Drawer :closable="false" placement="right" v-model="drawerVisible" width="60%" :title="drawerTitle">
            <Row>
                <Col>
                    <Card :shadow="false">
                        <Row>
                            <Form ref="form" :model="form" :label-width="100" :rules="formValidate" style="position:relative">
                                <FormItem label="认定证书" prop="certificateId">
                                    <Select v-model="form.certificateId" placeholder="选择证书" clearable style="width: 200px">
                                        <Option v-for="item in certificateList" :value="item.id" :key="item.id" :label="item.label"></Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="证书编号" prop="certificateNum">
                                    <Input v-model="form.certificateNum" style="width:600px" placeholder="请输入证书编号"/>
                                </FormItem>
                                <FormItem label="颁证机构" prop="award">
                                    <Input v-model="form.award" style="width:600px" placeholder="请输入颁证机构"/>
                                </FormItem>
                                <FormItem label="有效期" prop="validity">
                                    <DatePicker :value="form.validity" type="date" format="yyyy-MM-dd" clearable @on-change="dataChange" placeholder="选择有效期" style="width: 200px"></DatePicker>
                                </FormItem>

                                <Form-item class="br">
                                    <Button type="primary" :loading="submitLoading" @click="handelSubmit" style="width:100px">提交</Button>
                                    <Button @click="handelCancel">取消</Button>
                                </Form-item>
                                <Spin size="large" fix v-if="loading"></Spin>
                            </Form>
                        </Row>
                    </Card>
                </Col>
            </Row>
        </Drawer>
    </div>
</template>
<script>
    import {awardCertificate, selectCertificateList} from "@/api/bus";
    // 表情包配置 自定义表情可在该js文件中统一修改
    import {sina} from "@/libs/emoji";

    var xss = require("xss");
    export default {
        name: "award-drawer",
        components: {
        },
        data() {
            return {
                type: 0,
                isShow: false,
                loading: false, // 表单加载状态
                isExanMode: true,
                selectUsers: [],
                drawerTitle: "添加考试",
                drawerVisible: false,
                imgSize: "750*566",
                examModeString: '线下',
                certificateList: [],
                form: {
                    certificateId: '',
                    certificateNum: '',
                    validity: '',
                    award: '',
                    userId: '',
                    userexaminationId: ''

                },
                formValidate: {
                    certificateNum: [{required: true, message: "请输入证书编号", trigger: "blur"}],
                    award: [{required: true, message: "请输入颁证机构", trigger: "blur"}],
                    certificateId: [{required: true, message: "请选择证书", trigger: "blur"}],
                    validity: [{required: true, message: "请选择有效期", trigger: "blur"}],
                },
                submitLoading: false, // 添加或编辑提交状态
                dataEdit: "", // 编辑数据
                full: false, // html全屏开关
                fullscreenModal: false// 显示全屏预览
            };
        },
        methods: {
            init() {
                this.selectCertificate()
            },
            selectCertificate(){
                selectCertificateList().then(res => {
                    this.certificateList = res.data
                });
            },
            showDrawer(params) {
                console.info(params)
                this.form.userexaminationId = params.id
                this.form.userId = params.userId
                this.drawerTitle = "颁发证书";
                this.type = 0;
                this.drawerVisible = true;
            },
            dataChange(data1,data2){
                this.form.validity = data1;
            },
            handelSubmit() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.submitLoading = true;
                        // 编辑
                        awardCertificate(this.form).then(res => {
                            this.submitLoading = false;
                            if (res.status === true) {
                                this.$Message.success("操作成功");
                                this.$parent.getDataList();
                                this.drawerVisible = false;
                            }else {
                                this.$Message.error(res.message);
                            }
                        });
                    }
                });
            },
            handelCancel() {
                this.drawerVisible = false;
            },
        },
        mounted() {
            this.init();
        },
        watch: {}
    };
</script>